<template>
    <div class="top-message">
        <div class="top-box">
            <img :src="imgPath" class="top-img">
            <div style="width: 10px"></div>
            <div class="top-text">
                <textarea class="title" :value="title"></textarea>
                <div class="author">作者：{{ author }}</div>
                <div class="author">汉化组：{{ chineseTeam }}</div>
                <div class="author">总评论数：{{ message.total }}</div>
            </div>
        </div>
    </div>
    <div style="height: 135px">
        <div style="height: 90px"></div>
        <div style="height: 40px ;display: flex; align-items: center; justify-content: center">手淫强身，意淫强国</div>
        <div style="height: 5px; width: 100%; background-color: #f1929d"></div>
    </div>
    <div v-for="item in message.comicList" :key="item.id">
        <comment :message="item"></comment>
    </div>
    <div class="btn-container" v-show="isShowNextBtn">
        <van-pagination v-model="message.page" :page-count="message.pages" :items-per-page="3" @change="changePage">
            <template #page="{ text }">{{ text }}</template>
        </van-pagination>
    </div>
</template>

<script>
import comment from "@/components/main/part/comment";
import {useRoute} from 'vue-router'
import {_getComment} from "@/apis/comicAPI";
import {onActivated, onMounted, reactive, ref} from "vue";

export default {
    name: "comicComment",
    components: {
        comment
    },
    setup() {
        let route = useRoute()
        let imgPath = ref(route.query.img_path)
        let author = ref(route.query.author)
        let chineseTeam = ref(route.query.chinese_team)
        let title = ref(route.query.title)
        let isShowNextBtn = ref(true)

        let book_id = route.query.book_id
        let message = reactive({
            comicList: [],
            total: '',
            maxPage: '',
            pages:'',
            page:1
        })

        async function getComment(book_id,page) {
            const data = {
                book_id,
                page
            }
            await _getComment(data, res => {
                message.comicList = res.data.data.comments.docs
                message.total = res.data.data.comments.total
                message.pages = res.data.data.comments.pages
                window.scrollTo(0,0)
            },()=>{
                alert("Error")
            })
        }

        async function changePage() {
            await getComment(book_id, message.page)
        }

        onActivated(() => {
            let newTitle = route.query.title
            if (newTitle != title.value) {
                imgPath = ref(route.query.img_path)
                author = ref(route.query.author)
                chineseTeam = ref(route.query.chinese_team)
                title = ref(route.query.title)
                getComment()
            }
        })

        onMounted(() => {
            getComment(book_id,message.page)
        })

        return {
            title,
            imgPath,
            author,
            chineseTeam,
            message,
            changePage,
            isShowNextBtn
        }
    }
}
</script>

<style scoped>
.top-message {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 135px;
    background: linear-gradient(to right, #f5b1b8, #f1929d);
}

.top-box {
    width: 96%;
    height: 120px;
    display: flex;
}

.top-img {
    width: 100px;
    height: 120px;
}

.top-text {
    width: calc(100% - 110px);
    height: 100%;
    color: white;
}

.title {
    background-color: transparent;
    width: 94%;
    height: 50px;
    font-size: large;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    resize: none;
    border: none;
    outline: none
}

.author {
    padding-top: 3px;
    position: relative;
    left: 4%;
    width: 92%;
    font-size: medium;
    height: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 这里是超出几行省略 */
    text-overflow: ellipsis;
    max-height: 25px;
    overflow: hidden;
}

.btn-container {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>